<template>
	<view class="container">

		<u-cell-group class="class-group" :border="false">
			<u-cell-item :arrow="false">
				<view class="activity-intro">
					<image class="thumb" :src="classData.active.image_text" mode="aspectFill"></image>
					<view class="content">
						<view class="title">{{classData.active.name}}</view>
						<view class="info">开课时间：{{classData.active.start_time_text}}</view>
						<view class="info">限定人数：{{classData.active.max_count}}人</view>
					</view>
				</view>
			</u-cell-item>
		</u-cell-group>

		<u-cell-group class="class-group" :border="false">
			<u-cell-item title="预约人数" :arrow="false">
				<u-number-box class="wd-number-box" size="24" disabled-input="false" input-height="44" :min="1"
					v-model="total_num" @change="peopleChange"></u-number-box>
			</u-cell-item>
			<u-cell-item title="需支付金额" :arrow="false">
				<text class="class-group__price">¥{{classData.pay_price}}</text>
			</u-cell-item>
			<u-cell-item title="支付方式" :arrow="false">
				<view class="class-group__title"><u-icon name="weixin-fill" color="#09BB07" size="40" label="微信支付"
						label-color="#333333" label-size="26" margin-right="20"></u-icon></view>
			</u-cell-item>
		</u-cell-group>

		<u-cell-group class="class-group" :border="false">
			<u-cell-item :arrow="false">
				<u-input type="textarea" placeholder="添加预约备注信息，非必填项" v-model="remarks" :clearable="false" />
			</u-cell-item>
		</u-cell-group>

		<view class="wd-flex wd-buttonbar">
			<view class="wd-flex-cell">
				<u-button :custom-style="wd_button_primary" shape="circle" :ripple="true"
					@click="appoint()">确定预约</u-button>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				active_id: 0,
				classData: {
					pay_price: 0,

				},
				total_num: 1,
				remarks: ''
			}
		},
		onLoad(options) {
			if (options.active_id) {
				this.active_id = options.active_id;
				this.getDetail();
			}
		},
		methods: {

			getDetail() {
				var that = this;
				var active_id = that.active_id;
				var total_num = that.total_num;
				that.$core.post({
					url: 'fitness.active/sure',
					data: {
						active_id: active_id,
						total_num: total_num
					},
					success: (ret) => {
						that.classData = ret.data;
					},
					fail: (ret)=>{
						uni.showModal({
							title:'提示',
							content: ret.msg,
							showCancel:false,
							success(res) {
								uni.navigateBack()
							}
						})
						return false
					}
				});
			},
			peopleChange(e) {
				//this.getDetail();
				console.log('当前值为: ' + e.value)
				let that = this;
				setTimeout(function() {
					that.getDetail();
				}, 100)


			},
			appoint() {
				var that = this;
				var active_id = that.active_id;
				var total_num = that.total_num;
				var remarks = that.remarks;
				that.$core.post({
					url: 'fitness.active/create_order',
					data: {
						active_id: active_id,
						total_num: total_num,
						remarks: remarks
					},
					success: (ret) => {
						that.payment(ret.data);
					},
					fail: (ret)=>{
						uni.showModal({
							title:'提示',
							content: ret.msg,
							showCancel:false,
							success(res) {
								
							}
						})
						return false
					}
				});
			},

			payment(order) {
				let that = this;
				this.$core.post({
					url: 'fitness.pay/pay',
					data: {
						type: 'active',
						pay_type: 1,
						order_id: order.id,
						platform: 'wxmini'
					},
					success: (ret) => {
						let wxconfig = ret.data;
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: wxconfig.timeStamp,
							nonceStr: wxconfig.nonceStr,
							package: wxconfig.package,
							signType: wxconfig.signType,
							paySign: wxconfig.paySign,
							success: function(res) {
								let ids = getApp().globalData.config.activity_templates;
								uni.requestSubscribeMessage({
								  tmplIds: ids,
								  success (res) { 
									  
								  }
								})
								uni.redirectTo({
									url: '/pages/activity/activityStatus/activityStatus?order_id='+order.id+'&status=1'
								})
							},
							fail: function(err) {
								let ids = getApp().globalData.config.activity_templates;
								uni.requestSubscribeMessage({
								  tmplIds: ids,
								  success (res) { 
									  
								  }
								})
								uni.redirectTo({
									url: '/pages/activity/activityStatus/activityStatus?order_id='+order.id+'&status=0'
								})
							}
						});
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.class-group {
		display: block;
		margin-bottom: 16rpx;
		background-color: #FFFFFF;
		color: #333333;
		border-radius: 24rpx;
		overflow: hidden;

		.class-group__title,
		/deep/ .u-cell_title,
		/deep/ .u-input__textarea {
			font-size: 26rpx;
			color: #333333;
		}

		.class-group__price {
			font-size: 32rpx;
			color: #EE0000;
		}

		.class-group__text {
			margin-top: 10rpx;
			line-height: 34rpx;
			font-size: 24rpx;
			color: #D7D7D7;
		}
	}

	.activity-intro {
		display: flex;

		.content {
			flex: 1;
			overflow: hidden;
		}

		.thumb {
			display: block;
			margin-right: 48rpx;
			width: 220rpx;
			height: 290rpx;
			border-radius: 12rpx;
		}

		.title {
			margin-bottom: 22rpx;
			text-align: left;
			line-height: 50rpx;
			font-size: 36rpx;
			font-weight: 500;
			color: #333333;
			letter-spacing: 2rpx;
		}

		.info {
			margin-bottom: 6rpx;
			text-align: left;
			line-height: 38rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #999999;
		}
	}

	.class-list {
		padding: 0;
		text-align: left;
	}

	.class-tips {
		margin-bottom: 160rpx;
		padding: 26rpx 32rpx;
		line-height: 42rpx;

		.class-tips__title {
			font-size: 28rpx;
			color: #333333;
		}

		.class-tips__text {
			margin-top: 5rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}

	.wd-buttonbar .wd-flex-left {
		margin-right: 24rpx;
		width: 280rpx;
	}
</style>